
<script>
	// 数据详情页
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		components: {  },
		name: 'WeworkQrList'
	})
</script>
<script setup>
import * as echarts from 'echarts'
import {dateTypes} from '@/utils'
import { qrDataTableListData } from '@/data'
import MyIcon from '@/components/my-icon/index.vue'
import {postDataCustomerTable} from '@/api'
	import { ref,onMounted } from 'vue'
	const queryForm = ref({
		type:'times',
	})
	const selfTime = ref([])
	const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const dialogVisible = ref(false)
const staffData = ref([])
const chooseStaff = () => {
  dialogVisible.value = true
  chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
  console.log(val, '数据回显')
	staffData.value = val
	getData()
  handleRefresh()
}
const chooseDialogue = ref(null)

	const tableData = ref([])
	
	

		const exportExcel = () => {
			
		let url = window.location.origin+'/wework/user/data/customerdownexcel?wid='+localStorage.getItem('wid')+'&'
		for(var key in queryForm.value){
			if (queryForm.value[key]){
				url= url+key+'='+ queryForm.value[key]+'&'
			}
		}
		url = url.slice(0,url.length-1)
		window.open(url)
	}
	const  getData = async()=>{
		if (selfTime.value){
		if (selfTime.value.length==2){
			queryForm.value.ktime = selfTime.value[0]
			queryForm.value.dtime = selfTime.value[1]
		}else{
			queryForm.value.ktime =''
			queryForm.value.dtime = ''
		}
	}else{
		queryForm.value.ktime =''
		queryForm.value.dtime = ''
	}
	if (staffData.value.length>0) {
		queryForm.value.staffs = []
		staffData.value.forEach(item=>{
			queryForm.value.staffs.push(item.id)
		})
	}
		const r = await postDataCustomerTable(queryForm.value)
		if (r){
			tableData.value = r.data
		}
	}
	getData()
</script>

<template>
	<div class="app-edit app-gap-block">
    <div class="app-container">
			<div class="table-title app-flex-left">表格数据</div>
      <div class="app-gap-block-top">
				<div class="app-flex-2">
					<div>
						<el-radio-group @change="getData" v-model="queryForm.type" size="large">
      <el-radio-button label="times" >按日期查看</el-radio-button>
      <!-- <el-radio-button label="new" >按部门查看</el-radio-button> -->
			<el-radio-button label="staff" >按员工查看</el-radio-button>
		</el-radio-group>
		</div>
		<div>
				<el-button class="app-btn" @click="exportExcel">导出Excel</el-button>
		</div>

				</div>
					<div class="app-gap-block-top app-flex-left">
				
					<span class="app-select-right">选择时间：</span>
					<el-date-picker
					@change="getData"
						class="app-date-picker"
						value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
						v-model="selfTime"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="large"
					/>
					<span class="app-gap-words-left app-select-right">选择员工：</span>
				<span v-if="isRefresh">
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length>2">
    <span class="app-flex-left">
      <el-avatar v-if="staffData[0].avatar" class="cho-margin" shape="square" :size="30" :src="staffData[0].avatar" />
      <span>{{ staffData[0].name }}等{{staffData.length}}个账号</span>
    </span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
    <span class="app-flex-left" v-for="(item,index) in staffData" :key="index">
      <el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
      <span>{{ item.name }}</span>
    </span>
    <span v-if="staffData.length==0"> </span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
</span>
				</div>
				<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
			 

<div class="app-gap-block-top">
					<el-table class="app-select-table app-container-radius" :data="tableData" style="width:100%">
						<el-table-column v-if="queryForm.type=='times'" prop="time" label="日期" align="left" />
						<el-table-column v-else prop="time" label="员工" align="left">
<template #default="scope">
						<div class="app-flex-left">
							<el-avatar class="cho-margin" shape="square" :size="30" :src="scope.row.avatar" />
							<span class="app-gap-words-left">
								{{ scope.row.name}}
							</span>
						</div>
						</template>
					</el-table-column>
						<el-table-column align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">客户总数</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container pop-max-width">
										截止当前日期扫码添加的客户总数，若客户重复添加将不会重复计数；如果员工删除了客户，客户列表中将不会展示该客户
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.size_all }}
						</template>
					</el-table-column>
						<el-table-column align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">新增人数</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container pop-max-width">
										当前日期当天扫码添加的新增客户数，包含流失数据；如果员工删除了客户，客户列表中将不会展示该客户
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.add_size }}
						</template>
					</el-table-column>
						<el-table-column align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">发送申请数</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container pop-max-width">
									发起申请数，成员通过「搜索手机号」、「扫一扫」、「从微信好友中添加」、「从群聊中添加」、「添加共享、分配给我的客户」、「添加单向、双向删除好友关系的好友」、「从新的联系人推荐中添加」等渠道主动向客户发起的好友申请数量
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.customer_size }}
						</template>
					</el-table-column>
					<el-table-column align="right">
						<template #header>
							<!-- <div class="app-flex-left"> -->
								<span class="">流失客户数</span>
							<!-- </div> -->
						</template>
						<template #default="scope">
							{{ scope.row.del_size }}
						</template>
					</el-table-column>
		
					</el-table>
			</div>
			</div>
		
			
    </div>
    
	<div>
</div>

</div>


</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
</style>